<template>
  <div class="form-box">
    <el-form ref="ruleForm" :rules="rules" :model="itemInfo" label-width="auto">
      <el-form-item label="倒计时文案：" prop="writing">
        <el-input
          maxlength="10"
          style="width:30%"
          v-model="itemInfo.writing"
        ></el-input>
      </el-form-item>
      <el-form-item label="倒计时设置：" prop="countdown">
        <el-date-picker
          size="small"
          v-model="itemInfo.countdown"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="设置倒计时字号：" prop="fontSize">
        <el-select
          clearable
          style="width:15%"
          v-model="itemInfo.fontSize"
          placeholder="请选择字号"
        >
          <el-option
            v-for="item in fontSize"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-color-picker v-model="itemInfo.color" show-alpha> </el-color-picker>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: ['itemInfo'],
  data() {
    return {
      fontSize: [12, 14, 16, 18, 20, 24],
      rules: {
        writing: [{ required: true, message: '请输入文案', trigger: 'blur' }],
        countdown: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
        fontSize: [{ required: true, message: '请选择字号', trigger: 'change' }]
      }
    }
  },
  methods: {
    /* 收集数据 */
    collectData() {
      let flag = false
      this.$refs['ruleForm'].validate((valid) => {
        flag = valid ? true : false
      })
      return flag ? this.itemInfo : false
    }
  }
}
</script>
<style lang="less" scoped></style>
